<template>
	<view class="video-item" @click="toPlay">
		<view class="video-item-image">
			<u--image radius="8" mode="aspectFill" src="https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/video-cover1.png" width="100%" :height="height"></u--image>
			<view class="video-item-btn">
				<text class="iconfont icon-24gl-playCircle" style="color: #fff; font-size: 62rpx;"></text>
			</view>
		</view>
		<view class="video-item-title">{{playInfo.name || playInfo.name || playInfo.text}}</view>
	</view>
</template>

<script>
	export default {
		name: 'Camera',
		props: {
			playInfo: {
				type: Object,
				required: true,
				default: function() {
					return {}
				}
			},
			height: {
				type: String,
				required: true,
				default: '240rpx'
			}
		},
		methods: {
			toPlay() {
				let url = '/pages/home/controlVideo'
				this.$cuNavigateTo(url);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-item {
		.video-item-image {
			height: 240rpx;
			position: relative;
			.video-item-btn {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				z-index: 10000;
			}
		}
		.video-item-title {
			font-size: 28rpx;
			color: #000;
			line-height: 28rpx;
			padding: 16rpx 0;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}
</style>